<template>
    <div>
        <h1>编辑用户{{route.params.id}}</h1>
        <h2>姓名：{{route.query.name}}</h2>
        <h2>年龄：{{route.query.age}}</h2>

    </div>
    <div>
        <h4>映射传参方式，上面传参比较原始，这个比较方便</h4>
        <h1>用户：{{id}}</h1>
        <h2>姓名：{{name}}</h2>
        <h2>年龄：{{age}}</h2>
        <h2>段位：{{level}}</h2>


    </div>

</template>
<script setup>
import { ref,defineProps,onBeforeMount, 
  onMounted, 
  onBeforeUpdate, 
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated } from 'vue'

import { useRoute,useRouter,onBeforeRouteLeave } from 'vue-router'

// 组件内路由守卫，离开该路由时执行
// 可以用来提示用户是否保存了未提交的内容
// 可以用来保存用户未提交的内容
onBeforeRouteLeave((to, from, next) => {
    if(window.confirm('确定要离开吗？')){
        next()
    }else{
        next(false)
    }

})


const route = useRoute()
const router = useRouter()

console.log(route);
console.log(router);
const props = defineProps(['id','name','age','level'])

// 挂载阶段
onBeforeMount(() => {
  console.log('onBeforeMount - UserEdit组件挂载之前')
})

onMounted(() => {
  console.log('onMounted - UserEdit组件挂载完成后')
})

// 更新阶段
onBeforeUpdate(() => {
  console.log('onBeforeUpdate - UserEdit组件数据更新，DOM更新前')
})

onUpdated(() => {
  console.log('onUpdated - UserEdit组件数据更新，DOM更新后')
})

// 卸载阶段
onBeforeUnmount(() => {
  console.log('onBeforeUnmount -    UserEdit组件卸载前')
})

onUnmounted(() => {
  console.log('onUnmounted - UserEdit组件卸载后')
})

// keep-alive 相关
onActivated(() => {
  console.log('onActivated - UserEdit组件keep-alive 组件激活时')
})

onDeactivated(() => {
  console.log('onDeactivated -  UserEdit组件keep-alive 组件停用时')
})

</script>
